<template>
  <czr-return-previous></czr-return-previous>
  <div class="box">

    <h1 class="title">
        <span style="font-size: .8em;">
       {{ articleData.title }}
      </span>
    </h1>
    <div style="    display: flex;">
      <el-icon size="small">
        <Clock/>
      </el-icon>
      <el-text tag="p" size="small" style="    margin-left: .4em;">{{ formattedUpdateTime }}</el-text>
    </div>

    <div style="display: flex;    margin-top: 10px;">
      <el-image style="width: 35px; height: auto;border-radius: 50px;" :src="url" :zoom-rate="1.2"
                :preview-src-list="srcList"
                :initial-index="4" fit="cover"/>
      <el-text tag="p" style="font-size: 1em;margin-top: 0.4em;margin-left: 0.8em;">用户：{{ userName }}</el-text>
      <el-text tag="p" style="font-size: 1em;margin-top: 0.4em;margin-left: 1.8em;"> 分类：{{allCatsList.find(obj=>articleData.articleCatId==obj.id)?.catName?allCatsList.find(obj=>articleData.articleCatId==obj.id)?.catName:'暂无板块'}}</el-text>
    </div>

    <hr style="    margin-bottom: 1.3em;">
    <el-text class="mx-1" size="large" style="color: #222226">{{ articleData.content }}</el-text>
  </div>
</template>

<script setup>
import {ref, onMounted, computed} from "vue";
import {useRoute} from "vue-router";
import {Clock} from "@element-plus/icons-vue"
import {useUserToken} from "@/store/counter";
const userToken=useUserToken();
const allCatsList = ref([]) //articleCatId
let articleData = ref({})
let userName = ref()
const url =
    'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKYL5rCmOPfxXbHfUYib0ZBJtOxrWFABpOEWHKHiaWjP7NmMsiabZDIuznIibHYQNKicH5ic7a5h4jZ2ZjA/132'
onMounted(() => {

  loadData()
  console.log(articleData.value)
  allCatsList.value=userToken.getAllCatsList
})

function loadData() {
  articleData.value=userToken.getUserInfo
}

const formattedUpdateTime = computed(() => {
  return formatDate(articleData.value.updateTime);
});
const formatDate = (value) => {
  const dt = new Date(value);
  let year = dt.getFullYear();
  let month = (dt.getMonth() + 1).toString().padStart(2, '0');
  let date = dt.getDate().toString().padStart(2, '0');
  let hour = dt.getHours().toString().padStart(2, '0');
  let minute = dt.getMinutes().toString().padStart(2, '0');
  let second = dt.getSeconds().toString().padStart(2, '0');
  return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
}
</script>

<style scoped>
.box {
  margin: 1em;
}

h1, span, div {
  font-weight: normal;
}

.title {
  font-size: 1.7em;
  margin-bottom: 0.5em;
  line-height: 1.1em;
}
</style>